<template>
	<div>
		<div class="flex-between-center">
			<span style="font-size: 16px;">{{ activeLayoutItem.machineCode }}</span>
			<div class="flex-end-center" :style="{cursor: 'pointer', color: stateList[activeLayoutItem.state].color }" @click="onSelectMachineItem">
				<machine-run-state-icon :state="activeLayoutItem.state"></machine-run-state-icon>
				<span>{{ activeLayoutItem.state || activeLayoutItem.state === 0 ? stateList[activeLayoutItem.state].name : '' }}</span>
			</div>
		</div>
		<div class="flex-center">
			<el-button size="mini" circle type="default" icon="el-icon-user" class="item-gap"></el-button>
			<span>{{ activeLayoutItem.scheduleEmpList && activeLayoutItem.scheduleEmpList ? activeLayoutItem.scheduleEmpList.map(x => x.empName).join(' , ') : '无' }}</span>
		</div>
		<div class="flex-start-center-wrap" style="border: dashed 1px #dcdee2;border-left: none;margin-top: 10px;">
			<div v-for="(noticeItem, noticeIndex) in activeLayoutItem.noticeList" :key="noticeIndex" :span="12" style="width: 300px;font-size: 13px;color: #515a6e;border-left: dashed 1px #dcdee2;padding: 10px;">
				<div>
					<!--<div class="flex-start-center">机台状态：{{ noticeItem.noticeOrderEntity.openingState ? '' : '无' }}<open-state-bar v-if="noticeItem.noticeOrderEntity.openingState" :status="noticeItem.noticeOrderEntity.openingState"></open-state-bar></div>-->
					<div class="text-ellipsis">客户名称：{{ noticeItem.noticeOrderEntity.customerName || '无' }}</div>
					<div class="text-ellipsis">生产品种：{{ noticeItem.noticeOrderEntity.productName || '无' }}</div>
					<div class="text-ellipsis">生产批号：{{ noticeItem.noticeOrderEntity.batchCode || '无' }}</div>
					<div class="text-ellipsis">通知单号：{{ noticeItem.noticeOrderEntity.prdNoticeCode || '无' }}</div>
					<div class="text-ellipsis" style="white-space: nowrap;">排产时间：{{ noticeItem.noticeOrderEntity.subPlanStartDate ? `${noticeItem.noticeOrderEntity.subPlanStartDate || ''} ~ ${noticeItem.noticeOrderEntity.subPlanEndDate || ''}` : '无' }}</div>
					<div class="text-ellipsis">台日单产：{{ noticeItem.noticeOrderEntity.dailyYield || '无' }}</div>
					<div class="text-ellipsis">排产数量：{{ noticeItem.noticeOrderEntity.productionQty || '0' }}</div>
					<div class="text-ellipsis">完工数量：{{ noticeItem.noticeOrderEntity.completionQty || '0' }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import colorMixin from '../colors-mixin';
    import machineRunStateIcon from '../../machineStateMonitor/components/machine-run-state-icon';

    export default {
        mixins: [colorMixin],
        components: {
            machineRunStateIcon
        },
        props: {
            activeLayoutItem: {
                type: Object,
                default() {
                    return {};
                }
            }

        },
        data() {
            return {
            };
        },
        methods: {
            onSelectMachineItem() {
                this.$emit('on-status', JSON.parse(JSON.stringify(this.activeLayoutItem)));
            }
        }
    };
</script>
